<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '农商管理',
  },
}
</route>
<template>
  <div class="h-[100vh] py-5 px-8 box-border bg-[#f7f7f7]">
    <div
      class="mt-5 mb-5 py-4 px-2 box-border rounded-2 w-full flex gap-2 text-[#666] justify-center items-center bg-white"
    >
      <div class="line-text" style="flex: 1">{{ model.address }}</div>
      <div
        class="py-1 px-2 flex justify-center items-center border border-solid border-[#56b756] rounded-1 text-[#56b756]"
        style="white-space: nowrap"
        @click="getLocation"
      >
        修改
      </div>
    </div>
    <wd-form ref="form" :model="model">
      <wd-cell-group>
        <div class="form-item pb-5 bg-[#f7f7f7]">
          <div class="form-label text-[#666] text-[16px]">详细地址</div>
          <wd-textarea
            label=""
            label-width="100px"
            prop="detailAddress"
            clearable
            custom-textarea-class="ns-textarea"
            v-model="model.detailAddress"
            placeholder="请输入详细地址"
          />
        </div>
        <div class="form-item pb-5 bg-[#f7f7f7]">
          <div class="form-label form-label-required text-[#666] text-[16px]">用户姓名</div>
          <wd-input
            label=""
            label-width="100px"
            prop="name"
            clearable
            custom-class="custom-class-content"
            custom-input-class="ns-input"
            v-model="model.name"
            placeholder="请输入用户姓名"
            :rules="[{ required: true, message: '请填写用户姓名' }]"
          />
        </div>
        <div class="form-item pb-5 bg-[#f7f7f7]">
          <div class="form-label form-label-required text-[#666] text-[16px] bg-[#f7f7f7]">
            手机号码
          </div>
          <wd-input
            label=""
            label-width="100px"
            prop="mobile"
            clearable
            custom-class="custom-class-content"
            custom-input-class="ns-input"
            v-model="model.mobile"
            placeholder="请输入手机号码"
            :rules="[{ required: true, message: '请填写手机号码' }]"
          />
        </div>
        <div class="form-item pb-5 bg-[#f7f7f7]">
          <div class="form-label form-label-required text-[#666] text-[16px]">验证码</div>
          <div class="flex items-center">
            <div class="form-control" style="flex: 1">
              <wd-input
                label=""
                label-width="100px"
                prop="code"
                clearable
                custom-class="custom-class-content"
                custom-input-class="ns-input"
                v-model="model.code"
                placeholder="请输入手机验证码"
                :rules="[{ required: true, message: '请填写手机验证码' }]"
              />
            </div>
            <div class="text-[#56b756] text-[12px]" style="margin-left: 13px" @click="getCode">
              {{ codeText }}
            </div>
          </div>
        </div>
      </wd-cell-group>
    </wd-form>
    <buttonBtn @btnClick="handleSubmit">
      <view>立即修改</view>
    </buttonBtn>
  </div>
</template>

<script setup lang="ts">
import NsOverlay from '@/components/ns-overlay.vue'
import { editUserInfomation, userInformation } from '@/service/user'
import { useToast } from 'wot-design-uni'
import {sendCode} from "@/service/login";
function getLocation() {
  uni.getLocation({
    type: 'gcj02',
    success: function (success) {
      // 选择地点
      uni.chooseLocation({
        latitude: success.latitude,
        longitude: success.longitude,
        success: function (res) {
          model.address = res.address
        },
      })
    },
    complete: function () {},
  })
}
const toast = useToast()
const model = reactive<{
  // 地址
  address: string
  // 详细地址
  detailAddress: string
  // 用户姓名
  name: string
  // 手机号码
  mobile: string
  // 验证码
  code: string
}>({
  address: '内蒙古呼和浩特赛罕区晨光街科创中心...',
  detailAddress: '',
  name: '',
  mobile: '',
  code: '',
})
// 用户信息
const userInfo = ref<IUserInfo>({})
const getUserInfo = async () => {
  const res: IResData<IUserInfo> = await userInformation()
  if (res.code === 1) {
    userInfo.value = res.data
  }
}
const form = ref()

function handleSubmit() {
  console.log(form.value)

  form.value
    .validate()
    .then(async ({ valid, errors }) => {
      if (valid) {
        console.log('success', model)
        const res: any = await editUserInfomation(model)
        if (res.code === 1) {
          toast.success('修改成功')
          setTimeout(() => {
            uni.navigateBack({
              delta: 2,
            })
          }, 1000)
        }
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
// 获取验证码
const codeText = ref('获取验证码')
const getCode = async () => {
  if (codeText.value !== '获取验证码') return
  // 手机号验证正则
  const reg = /^1[3456789]\d{9}$/
  if (!reg.test(model.mobile)) return toast.show('请输入正确的手机号')
  const res: IResData<any> = await sendCode(model.mobile)
  if (res.code === 1) {
    toast.show('验证码发送成功')
    let time = 30
    codeText.value = `${time}s后重新获取`
    const timer = setInterval(() => {
      time--
      if (time <= 0) {
        clearInterval(timer)
        codeText.value = '获取验证码'
      } else {
        codeText.value = `${time}s后重新获取`
      }
    }, 1000)
  }
}
onLoad(async () => {
  await getUserInfo()
  Object.assign(model, userInfo.value)
})
</script>
<style scoped>
.form-label {
  margin-bottom: 20rpx;
}
.form-label-required {
  position: relative;
  padding-left: 8px;
}

.form-label-required::before {
  content: '*';
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 12px;
  color: #f61515;
}

:deep(.wd-textarea),
:deep(.wd-input) {
  border-radius: 16rpx !important;
}
</style>
